<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="findUSStates,createWKTParser,getColor,setUpClickListener" />
  <title>HERE Maps API Example: Choropleth Map - U.S.A. </title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-params="maps"
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad"
    data-libs="wkt-parser"
    data-parent="demos/wkt-parser/">
  </script>

  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Choropleth Map - U.S.A. </h1>
  <p>This geocodes the names of the fifty U.S. states and reads the shapes as WKT data.
    The regions are colored according to the date the state joined the union.
    Click on the map for more information.
  </p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
  <div id="src" style="width:100%">
    <br/>
      <p>The control can be loaded using the following <code>&lt;script&gt;</code> element:
      <pre><code class='prettyprint'>&lt;script type="text/javascript" charset="UTF-8" src="<a href="libs/WKT-parser.js">libs/WKT-parser.js</a>"&gt;&lt;/script></code></pre>
      <br/><p>Code:</p>
  </div>
<script id="example-code" data-categories="geojson" type="text/javascript" >
//<![CDATA[
var map,
  infoBubbles,
  bubble,
  parser,
  container;

function  getData(){
  return [{name: 'Alabama', date: 1819},
    {name: 'Alaska', date: 1959},
    {name: 'Arizona', date: 1912},
    {name: 'Arkansas', date: 1836},
    {name: 'California', date: 1850},
    {name: 'Colorado', date: 1876},
    {name: 'Connecticut', date: 1788},
    {name: 'Delaware', date: 1787},
    {name: 'Florida', date: 1845},
    {name: 'Georgia', date: 1788},
    {name: 'Hawaii', date: 1959},
    {name: 'Idaho', date: 1890},
    {name: 'Illinois', date: 1818},
    {name: 'Indiana', date: 1816},
    {name: 'Iowa', date: 1846},
    {name: 'Kansas', date: 1861},
    {name: 'Kentucky', date: 1792},
    {name: 'Louisiana', date: 1812},
    {name: 'Maine', date: 1820},
    {name: 'Maryland', date: 1788},
    {name: 'Massachusetts', date: 1788},
    {name: 'Michigan', date: 1837},
    {name: 'Minnesota', date: 1858},
    {name: 'Mississippi', date: 1817},
    {name: 'Missouri', date: 1821},
    {name: 'Montana', date: 1889},
    {name: 'Nebraska', date: 1867},
    {name: 'Nevada', date: 1864},
    {name: 'New Hampshire', date: 1788},
    {name: 'New Jersey', date: 1787},
    {name: 'New Mexico', date: 1912},
    {name: 'New York', date: 1788},
    {name: 'North Carolina', date: 1789},
    {name: 'North Dakota', date: 1889},
    {name: 'Ohio', date: 1803},
    {name: 'Oklahoma', date: 1907},
    {name: 'Oregon', date: 1859},
    {name: 'Pennsylvania', date: 1787},
    {name: 'Rhode Island', date: 1790},
    {name: 'South Carolina', date: 1788},
    {name: 'South Dakota', date: 1889},
    {name: 'Tennessee', date: 1796},
    {name: 'Texas', date: 1845},
    {name: 'Utah', date: 1896},
    {name: 'Vermont', date: 1791},
    {name: 'Virginia', date: 1788},
    {name: 'Washington', date: 1889},
    {name: 'West Virginia', date: 1863},
    {name: 'Wisconsin', date: 1848},
    {name: 'Wyoming', date: 1890}
  ];
}

function findUSStates(states, level) {

  // Region holds a list of U.S. states and dates joining the union.
  //  {name: 'Alabama', date: 1819},
  // {name: 'Alaska', date: 1959}, etc.
  $(states).each(function () {
    var state = this,
      url = 'http://geocoder.cit.api.here.com/6.2/geocode.json' +
      '?app_id=' + nokia.Settings.app_id +
      '&app_code=' + nokia.Settings.app_code +
      '&state=' +  state.name +
      '&country=USA' +
      '&level=' + level +
      '&mode=retrieveAddresses&maxresults=1' +
      '&additionaldata=IncludeShapeLevel,' + level;
    $.getJSON(url,  function (data) {
      var location = data.Response.View[0].Result[0].Location
      wktShape =  location.Shape.Value;
      container.objects.add(createWKTParser().addWKT(wktShape, state));
    });
  });
}

function createWKTParser() {
  return new WKTContainer({
    theme: {
      getPolygonPresentation: function (geoStrip, properties) {


        return new nokia.maps.map.Polygon(geoStrip,{
          pen: { strokeColor: "#22AA", lineWidth: 1 },
          brush: {
            color: getColor(properties.date)
            },
          label : properties.name + ' ' + properties.date
        });
      }
    }
  });
}

function getColor(date){
 var since = date - 1787;
    range =  ((128 - since)/2);

  if(range < 1){
    range = 0;
  }
  if(range > 63){
    range = 63;
  }
  range = parseInt(range, 16);
  range =  range < 0xF ? '0' + range : range;

  // Color will range from Green to Blue.
  return '#0' +  range + '6';
}


function setUpClickListener(container) {
  // Attach an event listener to map display
  // obtain the coordinates an display in an alert box.
  //
  var TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click';
  container.addListener(CLICK, function (evt) {
     infoBubbles.openBubble(evt.target.label,
      map.pixelToGeo(evt.displayX, evt.displayY));
  });
}



function afterHereMapLoad(theMap) {
  map = theMap;

  bubble = null;
  infoBubbles = new nokia.maps.map.component.InfoBubbles();
  infoBubbles.options.defaultWidth = 200;
  infoBubbles.options.width = 200;

  map.components.add(infoBubbles);
  map.set('center', new nokia.maps.geo.Coordinate(42.16, -100.16));
  map.set('zoomLevel', 3);

  container = new nokia.maps.map.Container();
  setUpClickListener(container);
  map.objects.add(container);
  findUSStates(getData(), 'state');
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
